<template>
	<view class="integralExchange">
		<!-- <u-swiper :list="goods_img_list" height="200" mode="number" indicator-pos="bottomRight" border-radius="0"></u-swiper> -->
		<view class="adImage">
			<image :src="goods_active.top_img" mode="aspectFill" @click="goUrl(goods_active.out_link,goods_active.title)"></image>
		</view>
		
		<scroll-view scroll-y class="goodsList" bindscrolltolower="onReachBottom">
			<view class="item flex_space_b" v-for="(item, index) in goods_list" :key="index" @click="goDetails(item.goods_id)">
				<view class="imageBox">
					<u-image width="200rpx" height="200rpx" border-radius="12" :src="item.goods_main_img"></u-image>
					<view class="mask flex_conter_c" v-if="item.store_num < 1">
						<image class="soldOut" src="/static/soldOut.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="info flex_conter_c">
					<view class="flex1 goodsInfoBox">
						<view class="title u-line-2">{{item.goods_title}}</view>
						<view class="data">
							<view class="flex">
								<view class="price">￥<text>{{item.sales_price}}</text></view>
								<view class="group">已参与0/3</view>
							</view>
							
							<view class="bottoBox flex_space_b">
								<view class="subsidy">未买中立赚￥{{item.max_income}}</view>
								<view class="car">
									<text>马上成团</text>
									<u-icon name="arrow-right" color="#fff" size="26"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			
			</view>
			<view class="noContent" v-if="goods_list.length == 0">
			  <image class="noContentImage" mode="widthFix" src="/static/noLive.png"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				goods_img_list: ['http://xcx.tfxiaochengxu.com/2021-01-07_5ff5f3d69c17f.jpg', 'http://xcx.tfxiaochengxu.com/2021-01-07_5ff5f3d6b520a.jpg', 'http://xcx.tfxiaochengxu.com/2021-01-07_5ff5f3d6cdbab.jpg'],
				
				goods_active:{},
				
				active_id:0,
				p: 1,
				is_loading: false,
				is_more: true,
				goods_list: []
			}
		},
		onLoad(opt) {
			this.active_id = opt.active_id;
			uni.setNavigationBarTitle({
				title:opt.title
			});
			this.loadData();
		},
		onReachBottom() {
			if (!this.is_loading) {
				if (!this.is_more) {
					util.toast("没有更多数据了");
					return false;
				}
				this.p = parseInt(this.p) + 1;
				this.loadData();
			}
		},
		onPullDownRefresh:function(){// 下拉刷新
			this.loadData();
		},
		methods: {
			loadData: function() {
				// 加载数据
				var that = this;
				this.is_loading = true;
				let data = {
					'p': this.p,
					'active_id':this.active_id
				};
				util.requestPost("api.php/home/activeGoodsList", data, function(res) {
					that.goods_active = res.data.goods_active;
					
					let is_more = false;
					if (res.data.goods_list.length >= 15) {
						is_more = true;
					}
					if (that.p == 1) {
						that.goods_list = res.data.goods_list;
					} else {
						that.goods_list = that.goods_list.concat(res.data.goods_list);
					}
			
					that.is_loading = false;
					that.is_more = is_more;
					uni.stopPullDownRefresh()
				});
			},
			goDetails(goods_id) {
				// 商品详情
				let that = this;
				uni.navigateTo({
					url: '/pages/index/goodsDetails?goods_id='+goods_id
				})
			},
			goUrl (url, nav_title) {
				util.navigateToPage(url,nav_title,false)
			},
			numFilter (value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			}
		}
	}
</script>

<style scoped lang="scss">

.u-scroll-view {
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
	position: relative;
}
.u-scroll-box {
	height: 80rpx;
	padding-left: 116rpx;
	position: relative;
	/* #ifdef MP-TOUTIAO */
	white-space: nowrap;
	/* #endif */
}
#u-tab-item-all {
	position: fixed;
	left: 0;
	top: 200rpx;
	background-color: #FFFFFF;
	z-index: 2;
}
#u-tab-item-all::after {
	content: '';
	display: block;
	height: 40rpx;
	width: 2rpx;
	background-color: #EEEEEE;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
.u-tab-item {
	position: relative;
	/* #ifndef APP-NVUE */
	display: inline-block;
	/* #endif */
	text-align: center;
	transition-property: background-color, color;
}
.tabItemStyle {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	transition-duration: 0.5s;
	padding: 0 28rpx;
	flex: 1;
	width: auto;
}
.tabItemStyle.active {
	font-weight: bold;
	color: #fe0000;
}
.u-tab-bar {
	position: absolute;
	top: 80rpx;
}

.adImage {
	width: 750rpx;
	height: 200rpx;
	image {
		width: 750rpx;
		height: 200rpx;
	}
}

.goodsList {
	height: calc(100vh - 200rpx);
	width: 750rpx;
	box-sizing: border-box;
	padding: 24rpx 32rpx 0;
	.item {
		border-radius: 12rpx;
		overflow: hidden;
		.imageBox {
			position: relative;
			overflow: hidden;
			border-radius: 12rpx;
		}
		.info {
			flex: 1;
			padding: 40rpx 20rpx;
			border-bottom: 1rpx solid #EEEEEE;
			height: 260rpx;
			.goodsInfoBox {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				height: 100%;
			}
			.title {
				color: #333333;
				font-size: 28rpx;
				font-weight: 600;
			}
			.data {
				margin-top: 8rpx;
				position: relative;
				.flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price {
						color: var(--primaryColor);
						font-size: 24rpx;
						margin-right: 20rpx;
						font-weight: 600;
						text {
							font-size: 32rpx;
						}
					}
					.original {
						color: #666;
						font-size: 24rpx;
						text-decoration: line-through;
					}
					.group {
						display: inline-block;
						font-size: 24rpx;
						color: var(--primaryColor);
						border-radius: 8rpx;
						padding: 0 4rpx;
					}
				}
				.ratio {
					color: #666;
					font-size: 24rpx;
					margin-top: 8rpx;
					text:first-of-type {
						margin-right: 28rpx;
					}
				}
				.bottoBox {
					margin-top: 8rpx;
					.subsidy {
						display: inline-block;
						color: #FFFFFF;
						font-size: 26rpx;
						padding: 4rpx 12rpx;
						border-radius: 40rpx;
						background: #f37b1d;
						.line {
							color: #333333;
							font-weight: bold;
							// margin: 0 8rpx;
						}
					}
					.car {
						color: #fff;
						font-size: 26rpx;
						padding: 4rpx 12rpx;
						border-radius: 40rpx;
						background: #ff4b06;
					}
				}
				.btn {
					background: var(--btnBgColor);
					position: absolute;
					bottom: 0;
					right: 0;
					border-radius: 40rpx;
				}
			}
		}
	}
}
</style>
